<swal title="Delete?"
      [text]="'Scope \'' + scope?.name + '\' will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<form class="needs-validation mt-3"
      [ngClass]="{ 'was-validated': form.submitted }"
      (ngSubmit)="form.form.valid && update()"
      novalidate
      #form="ngForm">
    <div class="form-group row">
        <label for="scope-id"
               class="col-sm-2 col-form-label">
            Scope Id
        </label>
        <div class="col-sm-10 col-form-label">
            <span class="col-form-label"
                  id="scope-id"
                  name="scope-id">
                {{ scope.name }}
            </span>
        </div>
    </div>
    <div class="form-group row">
        <label for="scope-display-name"
               class="col-sm-2 col-form-label">
            Display Name
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   [id]="'scope-display-name-' + discriminator"
                   [name]="'scope-display-name-' + discriminator"
                   [(ngModel)]="scope.displayName"
                   maxlength="200"
                   #scopeName="ngModel" />
        </div>
    </div>
    <div class="form-group row">
        <label for="scope-description"
               class="col-sm-2 col-form-label">
            Description
        </label>
        <div class="col-sm-10">
            <textarea [id]="'scope-description-' + discriminator"
                      [name]="'scope-description-' + discriminator"
                      class="form-control"
                      rows="3"
                      maxlength="1000"
                      [(ngModel)]="scope.description"
                      #description="ngModel">
            </textarea>
        </div>
    </div>
    <div class="form-group row">
        <label for="scope-required"
               class="col-sm-2 col-form-label">Required</label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       [id]="'scope-required-' + discriminator"
                       [name]="'scope-required-' + discriminator"
                       [(ngModel)]="scope.required"
                       #required="ngModel" />
                <label class="custom-control-label"
                       [for]="'scope-required-' + discriminator">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="scope-show-in-dd"
               class="col-sm-2 col-form-label">Show in Discovery Document</label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       [id]="'scope-show-in-dd-' + discriminator"
                       [name]="'scope-show-in-dd-' + discriminator"
                       [(ngModel)]="scope.showInDiscoveryDocument"
                       #showInDiscoveryDocument="ngModel" />
                <label class="custom-control-label"
                       [for]="'scope-show-in-dd-' + discriminator">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="scope-emphasize"
               class="col-sm-2 col-form-label">Emphasize</label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       [id]="'scope-emphasize' + discriminator"
                       name="scope-emphasize"
                       [(ngModel)]="scope.emphasize"
                       #emphasize="ngModel" />
                <label class="custom-control-label"
                       [for]="'scope-emphasize' + discriminator">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary m-r-5">
                Save Changes
            </button>
            <button type="button"
                    class="btn btn-danger m-r-5 float-right"
                    (click)="deletePrompt(scope)"
                    *ngIf="editable">
                Delete
            </button>
        </div>
    </div>
</form>